<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>htqw共享 | 主页</title>
		<script src="scripts/vue.js"></script>
		<script src="scripts/vue-router.js"></script>
		<link rel="shortcut icon" href="favicon.png" type="image/png" />
		<meta http-equiv="pragma" content="no-cache"> 
		<meta http-equiv="Cache-Control" content="no-store, must-revalidate"> 
		<meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT"> 
		<meta http-equiv="expires" content="0">
	</head>
	<body>
		<!-- 作者：海豚青蛙(htqw)、小尧 -->
		<link rel="stylesheet" type="text/css" href="styles/dialog.css" />  
		<link rel="stylesheet" type="text/css" href="styles/index.css" />
		<script src="scripts/jquery.js"></script>
		<script type="text/javascript" src="scripts/dialog-plus.js"></script>
		<script src="scripts/link-css.js"></script>
		<script src="./scripts/request.js"></script>

		<template id="about">
			<div id="about_t">
				<h3>项目名称：htqw共享</h3>
				<h3>git仓库：https://gitee.com/CHETEAM/htqw-share.git</h3>
				<h3>版本：v0.1.0</h3>
				<hr>
				<h1>贡献者：</h1>
				<h3>小尧(1361984525@qq.com)：前端页面美化(css)</h3>
				<h3>海豚青蛙(1931231838@qq.com)：前端页面+后端</h3>
			</div>
		</template>

		<template id="upload">
			<div id="upload_t">
				名称：<input v-model="name" type="text" /><br />
				介绍：<textarea v-model="describe"></textarea><br />
				<hr />
				浏览图(1M以下，png图片)：<input type="file" @change="picChange" /><img :src="pic" alt="" />
				<br />
				代码(5M以下，zip压缩包)：<input @change="codeChange" type="file"/>
				<br />
				<button @click="submit">上传项目</button>
			</div>
		</template>
		
		<template id="detail">
			<div id="detail_t">
                <h1>作者信息：</h1>
                <h3>作者：{{project.author.name}}(id:{{project.author.id}})</h3>
                <h3>作者邮箱：{{project.author.email}}</h3>
                <h3 v-if="project.author.op=='true'">htqw共享管理员</h3>
                <hr />
                <h1>项目信息：</h1>
                <h3>作品：{{project.project.name}}(id:{{project.project.id}})</h3>
                <h3>介绍：<textarea disabled>{{project.project.describe}}</textarea></h3>
                <div style="border: solid 1px;">
                    <h3>浏览图：</h3>
                    <img :src="project.project.pic" style="width: 50vw;" alt="" />
                </div>
                <h3>源码：<a download="code.zip" :href="project.project.code">点击此处下载</a></h3>
            </div>
		</template>
		
		<template id="home">
			<div id="home_t">
				<div v-if="user" id="upload"><router-link to="/upload">点击上传代码</router-link></div>
				<div id="upload"><router-link to="/about">关于本项目</router-link></div>
				
				<div id="search-container">
					<input v-model="keyword" placeholder="输入想要搜的关键词" />
					<button @click="search">搜索</button>
				</div>
				<div id="projects">
					<div @click="detail(project.project.id)" style="width:150px;height:200px;margin: 10px;display: inline-block;" :title="project.project.name" v-for="project in projects" :key="project.id">
						<img style="width:150px;height:200px;border:solid 1px;background: white;" :src="project.project.pic" alt="" />
						<p style="line-height:1pc;text-align:center;overflow:hidden;position:absolute;font-size:0.75pc;margin-top:calc(-1.85pc - 1px);margin-left:1px;background-color: rgba(0, 0,0 , 0.3);color:white;height:calc(1.1pc + 1px);width:140px">{{project.project.name}}</p>
					</div>
				</div>
				<p style="text-align: center;margin: 20px;">--已经到底了--</p>
			</div>
		</template>
		
		<template id="login">
			<div id="login_t">
				<h1>请登录!</h1>
				<p id="user">id:<input type="text" v-model="id"/></p>
				<p id="password">密码:<input :type="pass?'password':'text'" v-model="password"/><button @click="pass=!pass">{{pass?"显示":"隐藏"}}</button></p>
				<button @click="login">登录</button>
				<router-link to="/setup">注册</router-link>
			</div>
		</template>
		
		<template id="setup">
			<div id="setup_t">
				<h1>注册</h1>
				<p id="name">名称:<input type="text" v-model="name"/></p>
				<p id="password">密码:<input :type="pass?'password':'text'" v-model="password"/><button @click="pass=!pass">{{pass?"显示":"隐藏"}}</button></p>
				<p id="email">邮箱:<input type="email" v-model="email" /></p>
				<p id="code">验证码:<input type="text" v-model="code" /><button @click="getCode" type="button">发送验证码</button></p>
				<button @click="setupFn" type="button">注册</button>
				<router-link to="/login">登录</router-link>
			</div>
		</template>
		
		<template id="user_home">
			<div id="user_home_t">
				<h1>{{user?user.name:"无"}}</h1>
				<h2>你的id：{{user?user.id:"无"}}(请记住你的id，这是你登录的必填项)</h2>
				<button onclick="document.cookie='htqw_share_user=;path=/';location.href='./index.html'">退出账号</button>
			</div>
		</template>
		
		<div id="app">
			<div id="nav">
				<span @click="$router.push('/')">
					htqw共享
				</span>
				<div>
					{{user?('欢迎，'+user.name):"你好，请登录！"}}
					<img @click="goHome" :src="user?('users/'+user.id+'.png'):'images/user.png'" alt="" />
				</div>
			</div>
			
			<div id="content">
				<router-view></router-view>
			</div>
		</div>
		
		<script src="./scripts/index.js"></script>
	</body>
</html>
